<template>
  <div>
    <van-nav-bar left-text="返回" right-text="分享" title="社区" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-icon name="share-o" size="18" v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect"
          @click="showShare = true" />
      </template>
    </van-nav-bar>
    <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
    <!-- 背景图 -->
    <div class="zhezao">
      <img :src="bata.hot_background">
      <div class="bao" style="background: hsla(0,0%,90%,.6);">
        <div class="p">
          <van-icon :name="bata.hot_icon" :color="bata.hot_icon_color" size="2.5rem"></van-icon>
          <div>
            <p>{{ bata.hot_title }}</p>
            <p>话题{{ bata.hot_popularity }}万 人气{{ bata.hot_talk }}万</p>
          </div>
        </div>
        <a>{{ bata.hot_text_bottom }}</a>
      </div>
      <div style="margin: 0 20px;margin-top: 10px;">
        <van-image radius="8px" height="80px" width="100%" fit="cover" :src="bata.hot_cover" />
      </div>
      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" style="margin: 5px 20px;border-radius: 8px;">
            <van-swipe-item><van-image fit="contain" src="https://img1.baidu.com/it/u=306553046,2064608373&fm=253&fmt=auto&app=138&f=PNG?w=500&h=269"></van-image></van-swipe-item>
            <van-swipe-item><van-image fit="contain" src="https://img0.baidu.com/it/u=3152078875,1859517579&fm=253&fmt=auto&app=138&f=JPEG?w=900&h=500"></van-image></van-swipe-item>
            <van-swipe-item><van-image fit="contain" src="https://img1.baidu.com/it/u=173212637,280263868&fm=253&fmt=auto&app=138&f=JPEG?w=410&h=258"></van-image></van-swipe-item>
            <van-swipe-item><van-image fit="contain" src="https://img2.baidu.com/it/u=2080707488,4112500296&fm=253&fmt=auto&app=138&f=JPEG?w=417&h=225"></van-image></van-swipe-item>
            </van-swipe> -->
      <div class="a3">
        <a class="a3_1" @click="$router.push('/home/LiveClassRule')">↑ 驾考通 社区用户公约</a><br>
        <a @click="$router.push('/home/liveClassOneMe/1')">↑ 科目一不要无脑刷题啦</a><br>
        <a @click="$router.push('/home/liveClassOneMe/2')">↑ 考科四别再怕,我是这么通过的</a>
      </div>
      <van-sticky><van-tabs v-model:active="active">
          <van-tab title="评论"></van-tab>
        </van-tabs></van-sticky>
      <van-back-top style="margin-bottom: 3%;" />
    </div>
    <!-- <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> -->
      <comment-item 
            v-for="item in batatwo"
            :items="item"
            :key="item.content_id"
            ></comment-item>
    <!-- </van-list> -->
  </div>
  <van-sticky :offset-bottom="50" position="bottom"
    style="z-index: 999;display: table-cell;vertical-align: middle;text-align:center;">
    <van-button icon="plus" @click="showPopup" type="primary"
      style="border-radius: 50%;height: 50px;margin-left: 10px;"></van-button>
  </van-sticky>
  <van-popup v-model:show="show" position="bottom" :style="{ height: '15%' }">
    <div class="btn">
      <van-button round type="primary" size="large"  color="red" @click="router.push(`/home/LiveClassComment/${bata.hot_title}`)">评论</van-button>
    </div>
  </van-popup>
</template>
<script  >
import { createApp, ref, onMounted,reactive } from 'vue';
import { ShareSheet, Image as VanImage, showToast, Tab, Tabs, Sticky, showPopup, BackTop, List } from 'vant';
import { useRouter, useRoute } from 'vue-router';
import CommentItem from "@/components/CommentItem.vue";
import httpApi from '@/http';
const app = createApp();
app.use(ShareSheet);
app.use(Tab);
app.use(Tabs);
app.use(Sticky);
app.use(BackTop);
app.use(List);
export default {
  setup() {
    const route = useRoute()
    const id = route.params.id
    const router = useRouter();
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    const onClickLeft = () => history.back();
    const showShare = ref(false);
    const onSelect = (option) => {
      showToast(option.name);
      showShare.value = false;
    };
    const options = [
      { name: '微信', icon: 'wechat' },
      { name: '微博', icon: 'weibo' },
      { name: '复制链接', icon: 'link' },
      { name: '分享海报', icon: 'poster' },
      { name: '二维码', icon: 'qrcode' },
    ];
    const bata = ref({});
    const loading = ref(false);
    const finished = ref(false);
    const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     list.value.push(list.value.length + 1);
      //   }
      //   // 加载状态结束
      //   loading.value = false;
      //   // 数据全部加载完成
      //   if (list.value.length >= 40) {
      //     finished.value = true;
      //   }
      // }, 1000);
    };
    const hot_id = ref(null)
    const content_id = ref(null);
    const batatwo = reactive([]);
    onMounted(() => {
      httpApi.liveApi.queryById({ hot_id: id }).then((res) => {
        console.log("11111加载详情：", res);
        bata.value = res.data.data.result[0]
        console.log(res.data.data.result[0].hot_title)
        console.log('22',bata.value.hot_id)
        httpApi.liveApi.queryBylist({ page:1,pagesize:10,type: res.data.data.result[0].hot_title }).then((res) => {
        console.log("加载详情：", res);
        batatwo.push(...res.data.data.result)
      });
      });
      
    });
    
    
    return {
      options,
      onClickLeft,
      onSelect,
      showShare,
      showPopup,
      show,
      router,
      route,
      onMounted,
      onLoad,
      loading,
      finished,
      bata,
      batatwo,
    };
  },
};
</script>
<style lang="scss" scoped>
.btn {
  
  margin: 10px 80px;

}

.van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 140px;
  text-align: center;

}

.p {
  display: flex;
  padding-top: 25px;
  padding-left: 25px;


}

.p>div {
  margin-left: 15px;
  font-size: 0.5rem;
  color: gray;
}

.p>div>:first-child {
  font-size: 1rem;
  color: black;
}

.zhezao {
  position: relative;
}

.zhezao>img {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  filter: blur(10px) brightness(85%);
  z-index: -1000;
}

.bao {
  margin: 5px 20px;
  border-radius: 8px;
  padding-left: 5px;
}

.bao>a {
  color: gray;
  font-size: 1rem;
  padding: 20px 30px;
  text-align: center;
  display: inline-block;
}

.a3 {
  background: hsla(0, 0%, 90%, .6);
  margin: 5px 20px;
  border-radius: 8px;
  padding-left: 5px;

  .a3_1 {
    color: red;

  }

}

@keyframes hue {
  0% {
    filter: hue-rotate(0deg);
  }

  100% {
    filter: hue-rotate(360deg);
  }
}

.a3>a {
  display: inline-block;
  margin: 5px 5px;
  color: green;
}
</style>